{% extends "form_comp_base.html" %}

{% block title %}
{% if session %}
smallTalk - {{ session }}
{% else %}
smallTalk
{% endif %}
{% endblock %}

{% block content %}
{% verbatim %}
<script id="message-left" type="x-tmpl-mustache">
                    <div class="col-md-11 pull-left" msg_id="{{ msg_id }}">
                      <div class="media" style="margin:10px;">
                        <div class="media-left">
                          <strong>{{ nickname }}</strong>
                        </div>
                        <div class="media-body">
                          <div class="bg-success well-sm">
                            <h4 class="text-left" style="text-indent:1em;">
                              <small>在<strong>{{ time_update }}</strong>时写道</small>
                            </h4>
                            <h5 style="text-indent:2em; word-wrap: break-word; ">{{ content }}</h5>
                          </div>
                        </div>
                      </div>
                    </div>
</script>
<script id="message-right" type="x-tmpl-mustache">
                    <div class="col-md-11 pull-right" msg_id="{{ msg_id }}">
                      <div class="media" style="margin:10px;">
                        <div class="media-body">
                          <div class="bg-info well-sm">
                            <h4 class="text-right" style="padding-right:1em;">
                              <small>在<strong>{{ time_update }}</strong>时写道</small>
                            </h4>
                            <h5 class="text-right" style="padding-right:2em; word-wrap: break-word; ">{{ content }}</h5>
                          </div>
                        </div>
                        <div class="media-right">
                          <strong>{{ nickname }}</strong>
                        </div>
                      </div>
                    </div>
</script>
{% endverbatim %}

<script type="text/javascript">
	var uuid = '{{ uuid }}';
	var time_update = 0;
	var nickname = "{{ nickname }}";

	var message_new = 0;

	function update_title_on(){
		if (!document.hasFocus()) {
			document.title = "[新消息] {{ session }}";
		}
		{% if not no_audio %}
		document.getElementById('msg_audio').play();
		message_new = 1;
		{% endif %}
	}

	setInterval("update_title_off()", 1);
	function update_title_off() {
		if (document.hasFocus()) {
			message_new = 0;
			document.title = "smallTalk - {{ session }}";
		}
		if (message_new) {
			if (message_new == 1) {
				document.title = "[新消息] {{ session }}";
				message_new = 2;
			}
			else {
				document.title = "smallTalk - {{ session }}";
				message_new = 1;
			}
		}
	}

	function message_redundancy(msg_id) {
		// returns whether the message already exists
		message_list = $("#message-insert").children(); 
		for (var i = 0; i < message_list.length; i += 1) {
			if (message_list[i].getAttribute('msg_id') == msg_id) {
				return true; 
			}
		}
		return false; 
	}

	function message_pull(){
		function get_data() {
			return {
				time_update: time_update, 
				{% if history %}
				history: 'true', 
				{% endif %}
			}; 
		}
		ajaxSlow('{{ request.META.PATH_INFO }}', get_data, 'json', 
			function(msg){
				time_update = msg.time_update
				if (! msg.message_list.length) {
					return; 
				}
				for(var i = 0; i < msg.message_list.length; i++){
					if (message_redundancy(msg.message_list[i].msg_id)) {
						continue; 
					}
					var template = $('#message-left').html();
					if (msg.message_list[i]['nickname'] == nickname) {
						template = $('#message-right').html();
					}
					else {
						update_title_on();
					}
					$('#message-insert').append(Mustache.render(template, 
														msg.message_list[i]));
				}
				if (navigator.userAgent.indexOf("Trident") < 0 && 
					navigator.userAgent.indexOf("Webkit") < 0){
					var msg_box = $('#message_box_group')[0];
					msg_box.scrollTo(0, msg_box.scrollHeight);
				}
				else {
					$("#message-end")[0].scrollIntoView();
				}
			}, 3000);
	}
	
	message_pull(); 
	
	// Generate 32 char random uuid
	function gen_uuid() {
		uuid = "";
		for (var i=0; i < 32; i++) {
			uuid += Math.floor(Math.random() * 16).toString(16); 
		}
	}

	function message_push(){
		$('#send-button').attr('disabled', 'disabled'); 
		if(uuid == ''){
			gen_uuid();
		}
		ajaxLoad('/message/', {
			uuid: uuid, 
			content: $("#content").val(), 
			sender: '{{ nickname }}',
			session: '{{ session }}', 
		}, 'html', function(msg){
			// message_pull();
			$("#content").val("");
			$('#send-button').removeAttr('disabled'); 
		});
	}
</script>

<style type="text/css">
.text-hidden {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: pre-line;
}
</style>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-8 col-md-offset-2 col-xs-12">
      <div class="panel panel-default">
        <div class="panel-body">
          <div class="row">
            <div class="col-xs-12 col-sm-12">
              <h3 class="text-center">
                <a type="button" data-toggle="modal" data-target=".bs-example-modal-md">
                  <span class="glyphicon glyphicon-log-in"></span>
                </a>
                欢迎加入我们的会话，<abbr title="你的当前昵称"><span id="nickname-text">{{ nickname }}</span></abbr>
              </h3>
            </div>
          </div>
        </div>
      </div>

                <div id="message_box_group" class="well well-lg" style="overflow:auto;max-height:480px;">
                  <h5 class="text-center"><small>会话开始的分界线</small></h5>
                  <div id="message-insert" class="row"></div>
                  <div id="message-end"></div>
                </div>
                {% if nickname %}
                <form method="post" action="/message/">
                  {% csrf_token %}
                  <div class="form-group">
                    <textarea id="content" placeholder="与我们进行交互" class="form-control" rows="3" autofocus></textarea>
                  </div>
                  <div class="form-group">
                    <button type="button" class="btn btn-primary btn-block" id="send-button" onclick="message_push();">
                      <span class="glyphicon glyphicon-send"></span> 
                      发送
                    </button>
                  </div>
                </form>
                {% else %}
                  <div class="form-group">
                    <a href="/nickname/" class="btn btn-danger btn-block">
                      <span class="glyphicon glyphicon-user"></span> 
                      加入对话
                    </a>
                  </div>
                {% endif %}
              </div>
    
  </div>
</div>

<div class="modal fade bs-example-modal-md" tabindex="-1" role="dialog" aria-labelledby="qrModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">×</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title">邀请朋友</h4>
      </div>
      <div class="modal-body">
        <div class="text-center">
          <div class="row">
            <div class="col-md-6 col-sm-6">
              <img style="width: 100%" src="{{ qrcode_token }}" />
            </div>
            <div class="col-md-6 col-sm-6">
              <img style="width: 100%" src="{{ qrcode_session }}" />
            </div>
          <p class="text-center"><small>使用微信“扫一扫”功能加入会话。</small></p>
        </div>
      </div>
    </div>
  </div>
</div>

{% if not no_audio %}
<audio controls="controls" class="hidden" id="msg_audio">
  <source src="/static/audio/message-new.oga" type="audio/ogg">
  <source src="/static/audio/message-new.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
{% endif %}

{% endblock %}
